<template>
  <view class="box">
    <view class="top">
      <view class="title-top">{{dataForm.totalNum-dataForm.signNum}}人未签到，{{dataForm.signNum}}人签到</view>
    </view>
    <view class="kiss-list" v-for="item in dataList" :key="item.userId">
      <view class="kiss-list-title">
        <view class="left">
          {{item.name}} <span v-if="item.signFlag" class="left-time">{{item.signTime}}</span>
        </view>
        <view class="right1">
          <span v-if="item.signFlag" class="rignt1-name" @click="handleSeeSign(item.signImg)">查看签名</span>
          <span v-else>未签到</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        dataForm: {},
        dataList: []
      }
    },
    onLoad(options) {
      this.id = options.id
      this.initData()
    },
    methods: {
      initData() {
        uni.$u.http.get(`/train/mobile/train/signList/${this.id}`).then(res => {
          if (res.code == 0) {
            this.dataForm = res.data
            this.dataList = res.data.trainSignList
          }
        }).catch(err => {})
      },
      // 查看签名
      handleSeeSign(sign) {
        uni.$u.http.get(
          `/base/upload/bindFileUrl?fileUrl=${sign}`
        ).then(res => {
          if (res.code == 0) {
            uni.navigateTo({
              url: `/pages/subPackagesD/mycenter/sginselect?url=
								${encodeURIComponent(JSON.stringify(res.data))}&noShow=true`
            })
          }
        }).catch(err => {})
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: #f2f2f2;
  }

  .box {
    .top {
      padding: 32rpx;

      .title-top {
        font-size: 32rpx;
      }

      .top-tags {
        display: flex;
        font-size: 20rpx;
        margin-top: 16rpx;

        .tag-info {
          border-radius: 4px;
          background: rgba(14, 50, 97, 0.2);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 2px 12px 2px 12px;
          color: #0F53AC;
          margin-right: 24rpx;
        }

        .tag-unStart {
          border-radius: 4px;
          background: rgba(252, 119, 10, 0.2);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 2px 12px 2px 12px;
          color: #FC770A;
        }
      }
    }

    .kiss-list {
      .kiss-list-title {
        .left {
          .left-time {
            color: #8c8c8c;
            margin-left: 32rpx;
          }
        }

        .right1 {
          width: 30vw;

          .rignt1-name {
            color: #0F53AC
          }
        }
      }
    }
  }
</style>